<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" 
          uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>功能主页面</title>
<link rel="stylesheet"
	href=${pageContext.servletContext.contextPath}/css/bootstrap.min.css>
<link rel="stylesheet" type="text/css"
	href=${pageContext.servletContext.contextPath}/themes/bootstrap/easyui.css>
<link rel="stylesheet" type="text/css"
	href=${pageContext.servletContext.contextPath}/themes/icon.css>
<link rel="stylesheet" type="text/css"
	href=${pageContext.servletContext.contextPath}/themes/color.css>
<script type="text/javascript"
	src=${pageContext.servletContext.contextPath}/js/jquery.min.js></script>
<script type="text/javascript"
	src=${pageContext.servletContext.contextPath}/js/jquery.easyui.min.js></script>
<script
	src=${pageContext.servletContext.contextPath}/js/bootstrap.min.js></script>
</head>
<script type="text/javascript">
	$(function() {
		var id;
		//初始化页面
		$("#w").window("close"); 
		$("#w1").window("close");
		$("#w2").window("close");
		$.ajax({
			 url:'${pageContext.servletContext.contextPath}/allfoodsX',
	   		 dataType:'json',
	   		 type:'post',
	   		 data:{pageSize:'8'},
	   		 success:function(data){
	   			 var foods = data.list;
	   			 //初始页面
	   			 for (var i = 0; i < foods.length; i++) {
	   				c="<div name ='e' class='col-md-3'>"+
					"<a name='foods' value ="+foods[i].fid +">"+
					"<img  title="+foods[i].fmaterial+" src=${pageContext.servletContext.contextPath}/"+foods[i].furl +" style='width:200px;height:200px;'>"+
					"</a>"+
					"<br/>"+
					"<div class='col-md-8'>"+
					"<h5>"+foods[i].fname+"</h5>"+
					"</div>"+
					"<div class='col-md-4'>"+
					"<h5>"+"￥"+foods[i].fprice+"</h5>"+
					"</div>"+
					"</div>"
					$("#foo").append(c);
					}
	   			 	//分页查询
		   			$('#pp').pagination({ 
		   				total:data.total, 
		   				pageSize:8,
		   				pageList: [8,16,24,32,100],
			   				onSelectPage:function(pageNumber, pageSize){
			   					$.ajax({
			   					 url:'${pageContext.servletContext.contextPath}/allfoodsX?pageNumber='+pageNumber,
			   			   		 dataType:'json',
			   			   		 type:'post',
			   			   		 data:{pageSize:pageSize},
			   			   		 success:function(data){
				   			   		var foods = data.list;
				   	   				//alert(foods[0].furl);
				   	   				$("#foo").empty();
				   	   			 	for (var i = 0; i < foods.length; i++) {
				   	   				c="<div  name ='e' class='col-md-3'>"+
				   					"<a name='foods' value ="+foods[i].fid +">"+
				   					"<img title="+foods[i].fmaterial+" src=${pageContext.servletContext.contextPath}/"+foods[i].furl +" style='width:200px;height:200px;'>"+
				   					"</a>"+
				   					"<br/>"+
				   					"<div class='col-md-8'>"+
				   					"<h5>"+foods[i].fname+"</h5>"+
				   					"</div>"+
				   					"<div class='col-md-4'>"+
				   					"<h5>"+"￥"+foods[i].fprice+"</h5>"+
				   					"</div>"+
				   					"</div>"
				   					$("#foo").append(c);
				   					}
				   	   			 	//对图片绑定点击事件
				   	   				$("a[name='foods']").on("click", function(){
						   				/* var a = alert($(this).attr('value')); */
				   	   				id = $(this).attr('value');
					   				$("#w2").window("open");
						   				
						   			}) /* 回调函数的点击事件 */
			   			   		 }
		   					})
			   			}
		   			});
	   			 	//对图片绑定事件
		   			 $("a[name='foods']").bind("click", function(){
		   				//份数窗口
		   				id = $(this).attr('value');
		   				$("#w2").window("open");
		   				
		   			}) /* 初始界面的点击事件 */
				}/* 外层ajax的回调函数 */
		})//页面初始化,类型查询
		/* ------------------------------------------------ */
		$("a[name='to']").click(function(){
				 var type = $(this).attr('value');
				 $("#foo").empty();
				 $.ajax({
					 url:'${pageContext.servletContext.contextPath}/typefoodsX',
			   		 dataType:'json',
			   		 type:'post',
			   		 data:{pageSize:'8',"ftype":type},
			   		 success:function(data){
			   			 var foods = data.list;
			   			 //alert(foods[0].furl);
			   			 for (var i = 0; i < foods.length; i++) {
			   				c="<div name ='e' class='col-md-3'>"+
							"<a name='foods' value ="+foods[i].fid +">"+
							"<img title="+foods[i].fmaterial+" src=${pageContext.servletContext.contextPath}/"+foods[i].furl +" style='width:200px;height:200px;'>"+
							"</a>"+
							"<br/>"+
							"<div class='col-md-8'>"+
							"<h5>"+foods[i].fname+"</h5>"+
							"</div>"+
							"<div class='col-md-4'>"+
							"<h5>"+"￥"+foods[i].fprice+"</h5>"+
							"</div>"+
							"</div>"
							$("#foo").append(c);
							}
				   			$('#pp').pagination({ 
				   				total:data.total, 
				   				pageSize:8,
				   				pageList: [8,16,24,32,100],
					   				onSelectPage:function(pageNumber, pageSize){
					   					$.ajax({
					   					 url:'${pageContext.servletContext.contextPath}/typefoodsX?pageNumber='+pageNumber,
					   			   		 dataType:'json',
					   			   		 type:'post',
					   			   		 data:{'pageSize':pageSize,"ftype":type},
					   			   		 success:function(data){
						   			   		var foods = data.list;
						   	   				//alert(foods[0].furl);
						   	   				$("#foo").empty();
						   	   			 	for (var i = 0; i < foods.length; i++) {
						   	   				c="<div name ='e' class='col-md-3'>"+
						   					"<a name='foods' value ="+foods[i].fid +">"+
						   					"<img title="+foods[i].fmaterial+" src=${pageContext.servletContext.contextPath}/"+foods[i].furl +" style='width:200px;height:200px;'>"+
						   					"</a>"+
						   					"<br/>"+
						   					"<div class='col-md-8'>"+
						   					"<h5>"+foods[i].fname+"</h5>"+
						   					"</div>"+
						   					"<div class='col-md-4'>"+
						   					"<h5>"+"￥"+foods[i].fprice+"</h5>"+
						   					"</div>"+
						   					"</div>"
						   					$("#foo").append(c);
						   					}
						   	   			    $("a[name='foods']").on("click", function(){
								   				/* var a = alert($(this).attr('value')); */
								   				id = $(this).attr('value');
								   				$("#w2").window("open");
								   				
								   			}) /* 回调函数的点击事件 */
					   			   		 }
				   					})
					   			}
				   			});
				   			 $("a[name='foods']").on("click", function(){
				   				//alert($(this).attr('value'));
				   				id = $(this).attr('value');
				   				$("#w2").window("open");
				   			}) /* 初始界面的点击事件 */
						}/* 外层ajax的回调函数 */
				})//页面初始化2
			   		 
			   		 
				})//点击类型的ajax请求
			
		/* ------------------------------222222 */
		//模糊搜索查询
		$("button[name = 'bt']").on("click",function(){
		 var txt =$("#txt").val();
		 $("#foo").empty();
		 $.ajax({
			 url:'${pageContext.servletContext.contextPath}/likefoodsX',
	   		 dataType:'json',
	   		 type:'post',
	   		 data:{pageSize:'8',"txt":txt},
	   		 success:function(data){
	   			 var foods = data.list;
	   			 //alert(foods[0].furl);
	   			 for (var i = 0; i < foods.length; i++) {
	   				c="<div name ='e' class='col-md-3'>"+
					"<a name='foods' value ="+foods[i].fid +">"+
					"<img  title="+foods[i].fmaterial+"  src=${pageContext.servletContext.contextPath}/"+foods[i].furl +" style='width:200px;height:200px;'>"+
					"</a>"+
					"<br/>"+
					"<div class='col-md-8'>"+
					"<h5>"+foods[i].fname+"</h5>"+
					"</div>"+
					"<div class='col-md-4'>"+
					"<h5>"+"￥"+foods[i].fprice+"</h5>"+
					"</div>"+
					"</div>"
					$("#foo").append(c);
					}
		   			$('#pp').pagination({ 
		   				total:data.total, 
		   				pageSize:8,
		   				pageList: [8,16,24,32,100],
			   				onSelectPage:function(pageNumber, pageSize){
			   					$.ajax({
			   					 url:'${pageContext.servletContext.contextPath}/likefoodsX?pageNumber='+pageNumber,
			   			   		 dataType:'json',
			   			   		 type:'post',
			   			   		 data:{'pageSize':pageSize,"txt":txt},
			   			   		 success:function(data){
				   			   		var foods = data.list;
				   	   				//alert(foods[0].furl);
				   	   				$("#foo").empty();
				   	   			 	for (var i = 0; i < foods.length; i++) {
				   	   				c="<div name ='e' class='col-md-3'>"+
				   					"<a name='foods' value ="+foods[i].fid +">"+
				   					"<img  title="+foods[i].fmaterial+"  src=${pageContext.servletContext.contextPath}/"+foods[i].furl +" style='width:200px;height:200px;'>"+
				   					"</a>"+
				   					"<br/>"+
				   					"<div class='col-md-8'>"+
				   					"<h5>"+foods[i].fname+"</h5>"+
				   					"</div>"+
				   					"<div class='col-md-4'>"+
				   					"<h5>"+"￥"+foods[i].fprice+"</h5>"+
				   					"</div>"+
				   					"</div>"
				   					$("#foo").append(c);
				   					}
				   	   			 $("a[name='foods']").on("click", function(){
						   				/* var a = alert($(this).attr('value')); */

				   	   			id = $(this).attr('value');
				   				$("#w2").window("open");
						   				
						   			}) /* 回调函数的点击事件 */
			   			   		 }
		   					})
			   			}
		   			});
		   			 $("a[name='foods']").on("click", function(){
		   				//alert($(this).attr('value'));
		   				id = $(this).attr('value');
		   				$("#w2").window("open");
		   			}) /* 初始界面的点击事件 */
				}/* 外层ajax的回调函数 */
		})//页面初始化3
		})
		//提交菜单
		 $("#but").click(function(){
			var fids = $("#form").serialize();
			 /* 查询菜品状态  */
			 if(fids==""){
				 $.messager.alert('警告','必须添加菜品');    
			 }else{
				 $.ajax({
					 url:'${pageContext.servletContext.contextPath}/selectFoodsStateX',
	  		   		 dataType:'json',
	  		   		 type:'post',
	  		   		 data:{'fids':fids},
	  		   	     success:function(data){	
	  		   	    	 if(data.fstates==""){
		  		   	    	$("#w").window("open");
		  					$("#but1").click(function(){
		  						var did = $("#name").val();
		  						var pcount = $("#pcount").val();
		  						var fids = $("#form").serialize();
		  						var fnums = $("td[name='fnum']").text();
	  						  $.ajax({
	  							 url:'${pageContext.servletContext.contextPath}/submitfoods',
	  			   		   		 dataType:'json',
	  			   		   		 type:'post',
	  			   		   		 data:{'did':did,'pcount':pcount,'fids':fids,'fnums':fnums},
	  							 success:function(data){
	  								if(data.boole){
	  									$.messager.confirm('提交菜单消息框', '提交成功', function(r){
	  										if (r){
	  											location.replace("cplx.jsp")
	  										}
	  									});
	  								}else{
	  									$.messager.alert('警告','没有成功添加,请重新操作');
	  									$("#name").val("");
	  									$("#pcount").val("");
	  									$("#w").window("close");
	  								}
	  							}
	  						}); //
	  					})

	  		   	    	 }else{
	  		   	    	$("#w1").window("open");
						var states = data.fstates;
						for (var int = 0; int < states.length; int++) {
							h ="<h4><span class='label label-default'>菜品：</span><span>"+states[int].fname+"</span></h4>";
							$("#w1").append(h);
						}

	  		   	    	 }
	  		   	    	 }
				}) 
			 }
		})   /*  提交菜单 */
		//对菜品的份数输入
		$("#but2").click(function(){
			var num = $("#num").val();
			$("#num").val("")
			$("#w2").window("close");
			$.ajax({
  				 url:'${pageContext.servletContext.contextPath}/addfoodsX',
  				 dataType:'json',
			   		 type:'post',
			   		 data:{"fid":id,'num':num,'priceSum':$("#pSum").text()},
			   		 success:function(data){
  			   		var fname = data.fname;
					var fprice = data.fprice;
					var fid = data.fid
					var pSum = data.priceSum;
					$("#pSum").text(pSum);
					var tr = $('<tr></tr>');
					var td = $("<td><input name='ck' type = 'checkbox'></td>");
					var td1 = $("<td ><input type = 'hidden' name = 'fid' value ="+fid+"></td>");
					var td2 = $('<td>'+fname+'</td>');
					var td3 = $('<td>'+fprice+'</td>');
					var td4 = $("<td name='fnum'>"+num+'</td>');
					td.appendTo(tr);
					td1.appendTo(tr);
					td2.appendTo(tr);
					td3.appendTo(tr);
					td4.appendTo(tr);
					$("#heji").before(tr);
					//取消菜品
					$("input[name='ck']").click( function(){
						if(this.checked){
							var price = $("#pSum").text();
							var fprice = this.parentElement.parentElement.cells[3].innerHTML;
							var num1 = this.parentElement.parentElement.cells[4].innerHTML
							price = price - fprice*num1; 
							$("#pSum").text(price);
							this.parentElement.parentElement.remove();
							this.parentElement.parentElement.empty();
						}
			 		}) /* 初始复选框点击事件 */
			   	}
  				
			})
		})
		
	})//最外层
</script>
<body>
	<div class="container-fluid " >
		<div class="row" >
			<div class="col-md-8">
				<div class="masthead">
					<ul class="nav nav-justified" >
						<li><a name ="to" value = '川菜'><h4>川菜</h4></a></li>
						<li><a name ="to" value = '湘菜'><h4>湘菜</h4></a></li>
						<li><a name="to" value = '粤菜'><h4>粤菜</h4></a></li>
						<li><a name="to" value ='凉菜'><h4>凉菜</h4></a></li>
						<li><a name="to" value ='汤类'><h4>汤类</h4></a></li>
						<li><a name="to" value ='1'><h4>特色菜</h4></a></li>
					</ul>
				</div> <!-- 抬头表 -->
				    
			</div>
			<div class="col-md-4">
				<div class="col-md-4">
				</div>
				<div class="col-md-8">
				<br/>
				<div class="input-group col-md-12 " style="margin-top:0px positon:relative">  
           <input  id = "txt" type="text" class="form-control"placeholder="请输入菜品名称" />  
                <span class="input-group-btn">  
                   <button name = "bt" class="btn btn-info btn-search">查找</button>  
                </span>  
   				  </div>  <!-- 搜索框 -->
				</div>
			</div>
		</div>
	</div>
	<br/>
	<div class="container-fluid ">
		<div id="foo" class="col-md-10" style="right: 20px;overflow-y:auto;height:400px;">
		
		</div><!-- 显示图片 -->
			<div  class="col-md-2">
			<form id = "form" method="post">
			<table id = "order" class="table table-striped">
  			<tr>
  			<td>删除</td>
  			<td style="visibility: hidden;">id</td>
  			<td>名字</td>
  			<td>价格</td>
  			<td>份数</td>
  			</tr>
  			<tr id="heji">
  			<td >合计:</td>
  			<td></td>
  			<td></td>
  			<td id="pSum">0</td>
  			<td ></td>
  			<tr/>
			</table>
			<button id = "but" type="button" class="btn btn-success">提交菜单</button>
			</form>
			</div> <!-- 点菜单显示 -->
		 <div id="pp" class="col-md-10" style="background:#efefef;border:1px solid #ccc;width: 50%">
		 
		 </div>  <!-- 页码展示 -->
		</div>
		<!-- 桌号信息 -->  
		 <div id="w" class="easyui-window" title="桌号信息框" data-options="iconCls:'icon-save'" style="width:300px;height:200px;padding:10px;">
	  	<input id='name' type="text" class="form-control" style='margin-top: 10px' placeholder="请输入桌号">
	  	<input id='pcount' type="text" class="form-control" style='margin-top: 20px' placeholder="请输入人数">
	  	<br/>
	  	<button id="but1" type="button" class="btn btn-success">确定</button>
    </div> 
		<!-- 缺菜信息 --> 
		<div id="w1" class="easyui-window" title="缺菜信息框" data-options="iconCls:'icon-save'" style="width:300px;height:200px;padding:10px;">
	</div>	
	<!-- 份数信息 --> 
	<div id="w2" class="easyui-window" title="份数信息框" data-options="iconCls:'icon-save'" style="width:300px;height:150px;padding:10px;">
	  	<input id='num' class="form-control" style='margin-top: 10px' placeholder="请输入份数">
	  	<br/>
	  	<button id="but2" type="button" class="btn btn-success">确定</button>
    </div> 	
		
</body>
</html>